<template>
  <div
    class="split-pane"
    :class="[split, { dragging: isDragging }]"
    :style="containerStyle"
    @mouseup="stopDrag"
    @mousemove="handleDrag"
    @mouseleave="stopDrag"
  >
    <div
      class="split-pane-left"
      :style="leftPaneStyle"
      ref="leftPane"
    >
      <slot name="left"></slot>
    </div>

    <div
      class="split-pane-divider"
      @mousedown="startDrag"
    ></div>

    <div
      class="split-pane-right"
      :style="rightPaneStyle"
      ref="rightPane"
    >
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SplitPane',
  props: {
    // 分割方向: 'horizontal' 或 'vertical' (默认)
    split: {
      type: String,
      default: 'vertical',
      validator: value => ['horizontal', 'vertical'].includes(value)
    },
    // 初始分割位置 (百分比 0-100)
    defaultPercent: {
      type: Number,
      default: 50
    },
    // 左侧/上部面板最小尺寸 (百分比 0-100)
    minPercent: {
      type: Number,
      default: 10
    },
    // 左侧/上部面板最大尺寸 (百分比 0-100)
    maxPercent: {
      type: Number,
      default: 90
    }
  },
  data() {
    return {
      isDragging: false,
      startPos: 0,
      startPercent: this.defaultPercent,
      containerSize: 0,
      percent: this.defaultPercent
    }
  },
  computed: {
    containerStyle() {
      return this.split === 'vertical'
        ? { height: '100%' }
        : { width: '100%' }
    },
    leftPaneStyle() {
      return this.split === 'vertical'
        ? { width: `${this.percent}%`, height: '100%' }
        : { height: `${this.percent}%`, width: '100%' }
    },
    rightPaneStyle() {
      return this.split === 'vertical'
        ? { width: `${100 - this.percent}%`, height: '100%' }
        : { height: `${100 - this.percent}%`, width: '100%' }
    }
  },
  mounted() {
    this.percent = this.clampPercent(this.defaultPercent)
    this.$nextTick(() => {
      this.updateContainerSize()
      window.addEventListener('resize', this.updateContainerSize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateContainerSize)
  },
  methods: {
    updateContainerSize() {
      const container = this.$el
      this.containerSize = this.split === 'vertical'
        ? container.clientWidth
        : container.clientHeight
    },
    startDrag(event) {
      this.isDragging = true
      this.startPos = this.split === 'vertical'
        ? event.clientX
        : event.clientY
      this.startPercent = this.percent

      // 防止文本选中
      event.preventDefault()
      document.body.style.userSelect = 'none'
      document.body.style.cursor = this.split === 'vertical'
        ? 'col-resize'
        : 'row-resize'
    },
    handleDrag(event) {
      if (!this.isDragging) return

      const currentPos = this.split === 'vertical'
        ? event.clientX
        : event.clientY
      const delta = currentPos - this.startPos
      const deltaPercent = (delta / this.containerSize) * 100

      this.percent = this.clampPercent(this.startPercent + deltaPercent)
      this.$emit('resize', this.percent)
    },
    stopDrag() {
      if (!this.isDragging) return

      this.isDragging = false
      document.body.style.userSelect = ''
      document.body.style.cursor = ''
      this.$emit('resize-end', this.percent)
    },
    clampPercent(percent) {
      return Math.max(this.minPercent, Math.min(this.maxPercent, percent))
    }
  },
  watch: {
  }
}
</script>

<style scoped>
.split-pane {
  display: flex;
  position: relative;
  overflow: hidden;
}

.split-pane-left,
.split-pane-right {
  position: relative;
  overflow: auto;
}

.split-pane-divider {
  position: relative;
  background-color: #eee;
  transition: background-color 0.2s;
}

.split-pane.vertical .split-pane-divider {
  width: 1px;
  cursor: col-resize;
  background-color: white;
  /* solid 1px #e6e6e6 */
  /* border-left: 0.5px solid #ddd; */
  /* border-right: 0.5px solid #ddd; */
}

.split-pane.horizontal .split-pane-divider {
  height: 8px;
  cursor: row-resize;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.split-pane-divider:hover,
.split-pane.dragging .split-pane-divider {
  background-color: #ddd;
}
</style>
